<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Web Components</title>
</head>

<body>
    <!-- 使用自定义元素 -->
    <custom-button></custom-button>

    <!-- 自定义元素模板 -->
    <template id="custom-button">
        <button>自定义按钮</button>
        <style>
            button {
                display: inline-block;
                line-height: 1;
                white-space: nowrap;
                cursor: pointer;
                text-align: center;
                box-sizing: border-box;
                outline: none;
                margin: 0;
                transition: .1s;
                font-weight: 500;
                padding: 12px 20px;
                font-size: 14px;
                border-radius: 4px;
                color: #fff;
                background-color: #409eff;
                border-color: #409eff;
                border: 0;
            }

            button:active {
                background: #3a8ee6;
                border-color: #3a8ee6;
                color: #fff;
            }
        </style>
    </template>

    <script>

        /* 自定义元素类 */
        class CustomButton extends HTMLElement {
            constructor() {
                // 必须首先调用 super方法 
                super()

                // 读入组件模板
                const templateContent = document.getElementById('custom-button').content

                /* 配置影子DOM */
                // 页面打开时创建一个影子DOM
                const shadowRoot = this.attachShadow({ mode: 'open' })

                // 添加模板内容到影子DOM
                shadowRoot.appendChild(templateContent.cloneNode(true))

                // 为影子DOM添加事件交互
                shadowRoot.querySelector('button').onclick = () => {
                    alert('Hello World!')
                }
            }

            /* 生命周期（非必须） */
            connectedCallback() {
                console.log('connected')
            }
        }

        /* 创建自定义元素 */
        customElements.define('custom-button', CustomButton)

    </script>

</body>

</html>